<template>
  <div class="navbar">
    <div class="navbar_box">
      <!-- 左边返回按钮 -->
      <img
        class="left"
        @click="$router.push('/')"
        src="@/assets/imgs/user_colin/return.png"
        alt=""
      />
      <!-- 定义一个插槽，里边为标题名字 -->
      <slot class="title"></slot>
      <!--   //给slot标签样式毫无作用，可将以下代码复制到引入的组件中使用
            // text-align: center;
            // padding-top: .88rem; -->
      <!-- 右边搜索按钮 -->
      <img class="right" src="@/assets/imgs/user_colin/search.png" alt="" />
    </div>
  </div>
  <div class="navbar_margin"></div>
</template>
<script>
import { loadWeddingShop } from "@/API/team/colin";
export default {
  data() {
    return {};
  },
  async mounted() {
    const shop = await loadWeddingShop();
    console.log(shop);
  },
};
</script>
<style lang="scss" scoped>
.navbar {
  box-sizing: border-box;
  padding-top: 0.2rem;
  position: fixed;
  top: 0;
  z-index: 99999;
  width: 7.5rem;
  height: 1.75rem;
  background: #d84141;
  font-size: 0.35rem;
  font-weight: 400;
  color: #333333;

  .navbar_box {
    // position: absolute;
    // bottom: 0.25rem;
    // left: 0.3rem;
    width: 6.9rem;
    margin: 0 auto;
    .left {
      position: absolute;
      left: 0.3rem;
      top: 1.15rem;
      width: 0.2rem;
      height: 0.35rem;
    }
    .right {
      position: absolute;
      right: 0.3rem;
      top: 1.15rem;
      width: 0.3rem;
      height: 0.3rem;
    }
  }
}
.navbar_margin {
  margin-top: 1.75rem;
}
</style>
